import styles from './index.module.scss'
import classNames from 'classnames';
import MainTitle from "@/components/MainTitle"
import TitleWhithLine from "@/components/TitleWhithLine";
import { Col, Row } from 'antd';

const Join = () => {
    const list = [
        {
            title: "Members",
            secondTitle: 'Building and selling cloud native tech?',
            text: "Shape the ecosystem and drive cross-company collaboration with more than 700 members.",
            searchText: "BECOME A MEMBER",
            color: "#b1fbde"
        }, {
            title: "Contributors",
            secondTitle: 'Looking to get involved?',
            text: "From coders to creatives, join our welcoming, global community and advance CNCF cloud native projects.",
            searchText: "START CONTRIBUTING",
            color: "#bed8fe"
        }, {
            title: "Members",
            secondTitle: 'Using cloud native technologies?',
            text: "Accelerate your adoption in close collaboration with peers, project maintainers, and CNCF.",
            searchText: "JOIN THE COMMUNITY",
            color: "#e2befe"
        }
    ]
    return (
        <div className={classNames('container', styles.joinBox)}>
            <MainTitle title='Ready to go the open geospatial world？' />
            <MainTitle title='Join OGA of doers' />

            <Row gutter={40} align="stretch" style={{ marginTop: "60px" }}>
                {list.map((item, index) => {
                    return <Col span={8} key={index + "_join"}>
                        <div className={styles.tabBox}>
                            <div className={styles.titleBox} style={{ background: item.color }}>{item.title}</div>
                            <div className={styles.contentBox}>
                                <p>{item.secondTitle}</p>
                                <div>{item.text}</div>
                            </div>
                            <div className={styles.titleLine}>
                                <TitleWhithLine title={item.searchText} />
                            </div>
                        </div>
                    </Col>
                })}
            </Row>

        </div>
    )
}
export default Join;